<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快速搜索器</title>
<style type="text/css">
.c1 {
  position: absolute;
}

#i1 {
  visibility: hidden;
  top: 70px;
}

td {
  font-size: 12px;
}

#i2 {
  background-image: url("buttonBack.gif");
  width: 123px;
  height: 22px;
  font-size: 12px;
}
</style>
</head>
<body>
  <div class="c1">
    <!-- 主页：快速搜索器 -->
    <table style="width: 517px; height: 289px; background-image: url('bg.gif')">
      <tr>
        <th style="height: 33px" colspan="2"></th>
      </tr>
      <tr>
        <td colspan="1">
        &nbsp;<span style="font-family: 宋体">地点:&nbsp;</span>
          <!-- 触发点击事件后，将id为i1的元素的style属性的子属性visibility的值更改为visible -->
          <input id="i2" type="button" value="选择/修改"
            onclick="document.getElementById('i1').style.visibility = 'visible'">
        </td>
        <td rowspan="2">
          <div style="width: 230px"></div>
        </td>
      </tr>
      <tr>
        <td>
          <img src="next.jpg" width="180" height="186" alt="next">
        </td>
      </tr>
    </table>
  </div>
  <div id="i1" class="c1">
    <!-- 选择工作地点 -->
    <table id="t1" style="width: 481px; height: 118px; background-image: url('layerBack.jpg')">
      <tr style="height: 25px">
        <td colspan="4" style="text-align: right">
          <a href="#" onclick="hid()">关闭</a>
        </td>
      </tr>
      <script type="text/javascript">
        var t1 = document.getElementById("t1");
        var arr = [ "北京", '上海', "广州", '深圳', "杭州", '武汉', "重庆", '成都' ];
        for (var i = 0; i < 2; i++) {
          var tr = t1.appendChild(document.createElement("tr"));
          for (var j = 4 * i; j < (i + 1) * 4; j++) {
            var td = tr.appendChild(document.createElement("td"));
            td.innerHTML = "<a href='#' onclick='city(this.innerText);hid()'>" + arr[j] + "</a>";
            td.style.textAlign = "center";
          }
        }
      </script>
    </table>
  </div>
</body>
<script>
  function city(obj) {
    // 将id为i2的元素的value属性的值更改为obj
    document.getElementById("i2").value = obj;
  }
  function hid() {
    document.getElementById('i1').style.visibility = 'hidden'
  }
</script>
</html>